﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/Css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="~/Content/Css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="~/Content/Css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="~/Content/Css/animate.css" rel="stylesheet">
    <link href="~/Content/Css/style.css?v=4.1.0" rel="stylesheet">
    <link href="~/Content/Css/plugins/multiselect/bootstrap-multiselect.css" rel="stylesheet" />
    <style>
        .ibox {
            margin-bottom: 0px;
        }

        .ibox-content {
            padding: 15px 20px 0px 20px;
        }

        .multiselect-container input[type="checkbox"] {
            margin-top: 7px;
        }

        .RoleIDLaber {
            padding-top: 8px;
            padding-left: 0px;
            padding-right: 0px;
        }

        .padding {
            padding-left: 0px;
            padding-right: 0px;
            text-align: right;
        }
    </style>
</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight" style="padding:10px;">
        <div class="ibox float-e-margins">
             

            <div class="panel panel-default" style="margin-top:10px;margin-bottom:10px;">
                <div class="panel-heading">
                    <strong>查询条件</strong>
                </div>
                <div class="panel-body">
                    <div class="pull-left" style="width:200px;">
                        <div class="col-xs-3" style="padding:6px 0 0 0;">币种：</div>
                        <div class="col-xs-9" style="padding:0 0 0 0;">
                            <select class="form-control" name="Currencys" id="Currencys">
                                <option value="">全部</option>
                            </select>
                        </div>
                    </div>
                    <div class="pull-left" style="width:200px;">
                        <div class="col-xs-4" style="padding:6px 0 0 0;">开始时间：</div>
                        <div class="col-xs-8" style="padding:0 0 0 0;">
                            <input type="text" class="form-control inp" id="BeginTime" name="BeginTime" readonly="readonly" value="@DateTime.Now.ToString("yyyy-MM-dd")">
                        </div>
                    </div>
                    <div class="pull-left" style="width:200px;">
                        <div class="col-xs-4" style="padding:6px 0 0 0;">结束时间：</div>
                        <div class="col-xs-8" style="padding:0 0 0 0;">
                            <input type="text" class="form-control inp" id="EndTime" name="EndTime" readonly="readonly" value="@DateTime.Now.ToString("yyyy-MM-dd")">
                        </div>
                    </div>
                </div>
            </div>

            <div class="ibox-content" style="padding:15px;">
                <div class="btn-group hidden-xs" id="exampleToolbar" role="group">
                    @*<button id="insertBtn" type="button" class="btn btn-outline btn-default">
                    <i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
                </button>
                <button id="editBtn" type="button" class="btn btn-outline btn-default">
                    <i class="glyphicon glyphicon-edit" aria-hidden="true"></i>
                </button>
                <button id="deleteBtn" type="button" class="btn btn-outline btn-default">
                    <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
                </button>*@
                    <button id="refreshBtn" type="button" class="btn btn-outline btn-default">
                        <i class="glyphicon glyphicon-refresh" aria-hidden="true"></i>
                    </button>

                </div>
                <table id="table" data-mobile-responsive="true"></table>
            </div>
        </div>
        @* 用来传递消息的隐藏域 *@
    </div>



    <!-- 全局js -->
    <script type="text/javascript" src="~/Scripts/jquery.min.js?v=2.1.4"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap.min.js?v=3.3.6"></script>
    <!-- 自定义js -->
    <script type="text/javascript" src="~/Scripts/content.js?v=1.0.0"></script>
    <!-- Bootstrap table -->
    <script type="text/javascript" src="~/Scripts/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="~/Scripts/plugins/bootstrap-table/extensions/export/bootstrap-table-export.js"></script>
    <script src="~/Scripts/plugins/bootstrap-table/extensions/export/tableExport.jquery.plugin-master/tableExport.js"></script>
    <script type="text/javascript" src="~/Scripts/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <!-- layerDate plugin javascript -->
    <script type="text/javascript" src="~/Scripts/plugins/layer/laydate/laydate.js"></script>
    <script src="~/Scripts/plugins/multiselect/bootstrap-multiselect.js"></script>

    <script type="text/javascript">
        $(function () {
            GetStaff();
            GetCurrencys();
            initTable();
        });

        var $table = $('#table');
        function initTable() {
            $table.bootstrapTable({
                url: '/BackStaff/IndexAsync',            //数据来源地址
                method: 'post',                     //数据请求方式
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否启用分页
                sidePagination: 'server',           //在服务器端分页
                queryParams: queryParams,           //传递参数
                pageNumber: 1,                      //初始化加载第一页，默认第一页
                pageSize: 20,                       //每页的记录行数（*）
                pageList: [10, 20, 30, 40, 50],     //可供选择的每页的行数（*）
                clickToSelect: true,                //是否启用点击选中行
                //toolbar: "#tableToolBar",
                height: getHeight(),
                search: true,
                showRefresh: true,
                showColumns: true,
                showExport: true,                     //是否显示导出
                exportDataType: "basic",              //basic', 'all', 'selected'.
                exportTypes: ['excel'],
                exportOptions: { fileName: '123' },
                toolbar: '#exampleToolbar',
                iconSize: 'outline',
                icons: {
                    refresh: 'glyphicon-repeat',
                    columns: 'glyphicon-list'
                },
                toolbar: '#exampleToolbar',
                columns: [{
                    width: 38,
                    field: 'aaaaaaa',
                    checkbox: true,
                }, {
                    title: '行号',
                    align: 'center',
                    width: 50,
                    formatter: function (value, row, index) { return index + 1; }
                }, {
                    field: 'CalculatingDay',
                    title: '算力时间',
                    align: 'center'
                }, {
                    field: 'Currencys',
                    title: '币种',
                    align: 'center'
                }, {
                    field: 'Xiaozhangyu',
                    title: '小章鱼',
                    align: 'center'
                }, {
                    field: 'Xiaoqiao',
                    title: '小乔',
                    align: 'center',
                }, {
                    field: 'Dawei',
                    title: '大伟',
                    align: 'center'
                }, {
                    field: 'Xiaowu',
                    title: '小五',
                    align: 'center'
                }, {
                    field: 'Xiaohui',
                    title: '小辉',
                    align: 'center'
                }, {
                    field: 'Xiaoliang',
                    title: '小亮',
                    align: 'center',
                }, {
                    field: 'Xiaoran',
                    title: '萧然',
                    align: 'center'
                }, {
                    title: '总和',
                    align: 'center',
                    formatter: SumFormatter
                }
                ]
            });
        }

        //查询的参数
        var queryParams = function (params) {
            var temp = {
                staffID: $('#Staff').val(),
                currencys: $('#Currencys').val(),
                beginTime: $('#BeginTime').val(),
                endTime: $('#EndTime').val(),
            };
            console.log(temp);
            console.log(params);
            return temp;
        };

        //获取表格高度
        function getHeight() {
            return $(window).height() - 180;
        }

        //刷新表格数据
        var refreshTable = function () {
            $table.bootstrapTable("refresh");
        }

        //刷新按钮
        $("#refreshBtn").click(function (e) {
            $table.bootstrapTable("refresh");
        });

        //搜索按钮
        $("#searchBtn").click(function (e) {
            $table.bootstrapTable("refresh");
        });

        //总和
        function SumFormatter(value, row, index) {
            var sum = parseInt(row.Xiaozhangyu) + parseInt(row.Xiaoqiao) + parseInt(row.Dawei) + parseInt(row.Xiaowu) + parseInt(row.Xiaohui) + parseInt(row.Xiaoliang) + parseInt(row.Xiaoran);
            return sum;
        }

        //角色
        function GetStaff() {
            $.getJSON("/BackStaff/GetStaff", function (data) {
                $("#Staff").empty();//清空省份SELECT控件
                $("<option></option>").val("").text("全部").appendTo($("#Staff"));

                
               $.each(data, function (i, item) {
                    $("<option></option>").val(item["ID"]).text(item["Name"]).appendTo($("#Staff"));
                })
            });
        }

        //币种
        function GetCurrencys() {
            $.getJSON("/BackStaff/GetCurrencys", function (data) {
                $("#Currencys").empty();//清空省份SELECT控件

                $("<option></option>").val("").text("全部").appendTo($("#Currencys"));
                

                $.each(data, function (i, item) {
                    $("<option></option>").val(item["Name"]).text(item["Name"]).appendTo($("#Currencys"));
                })
            });
        }

        laydate({
            elem: '#BeginTime',
            format: 'YYYY-MM-DD', // 分隔符可以任意定义，该例子表示只显示年月
            festival: true, //显示节日
            max: '2099-01-01 00:00:00', //设定最小日期为当前日期
            min: '2010-01-01 00:00:00', //最大日期
            choose: function (datas) { //选择日期完毕的回调
                //alert('得到：' + datas);
            }
        });
        laydate({
            elem: '#EndTime',
            start: laydate.now(),
            format: 'YYYY-MM-DD', // 分隔符可以任意定义，该例子表示只显示年月
            festival: true, //显示节日
            max: '2099-01-01 00:00:00', //设定最小日期为当前日期
            min: '2010-01-01 00:00:00', //最大日期
            choose: function (datas) { //选择日期完毕的回调
                //alert('得到：' + datas);
            }
        });
    </script>
</body>
</html>
